<ul *ngFor="let item of data">
    <li (click)="goTree(item)">
        <div>
            <p style="font-weight: 400; font-size:16px;">
                {{item.name}}/{{item.id}}
            </p>
            <p mat-raised-button [matTooltip]="item.trees" aria-label="Button that displays a tooltip when focused or hovered over" *ngIf="item.trees.length>50;else trees">
                <!-- {{item.trees.substring(0,20)}} ...... {{item.trees.substring(item.trees.length - 20,item.trees.length)}} -->
                <span *ngIf="item.trees.split('-')[0].length<25 && item.trees.split('-')[item.trees.split('-').length-1].length<20"> {{item.trees.split('-')[0]}}-......-{{item.trees.split('-')[item.trees.split('-').length-1]}}</span>
                <span *ngIf="item.trees.split('-')[0].length>25"> ......-{{item.trees.split('-')[item.trees.split('-').length-1]}}</span>
                <span *ngIf=" item.trees.split( '-')[item.trees.split( '-').length-1].length>25"> ......-{{item.trees.split('-')[item.trees.split('-').length-1]}}</span>
            </p>
            <ng-template #trees>
                <p>
                    {{item.trees}}
                </p>
            </ng-template>
        </div>

        <span class="material-icons arrow">
            keyboard_arrow_right
        </span>
    </li>
</ul>